<template>
  <div class="manage-basic">
    <div v-if="!showSecondary" class="main">
      <ItemList
        v-if="defaultScheme[0]?.values.SETPLAN_ASSOCIATE_TOP_MENU_NAME"
        class="JE_Manage_Basic"
        :title="`${defaultScheme[0]?.values.JE_SYS_PATHSCHEMENAME}（${defaultScheme[0]?.values.JE_SYS_PATHSCHEME}）- ${defaultScheme[0]?.values.SETPLAN_ASSOCIATE_TOP_MENU_NAME}`"
        :info="$t('basic.info')"
        :can-delete="false"
        @listClick="($event) => listClick('isDefault', $event)"
      ></ItemList>
      <ItemList
        v-else
        class="JE_Manage_Basic"
        :title="`${defaultScheme[0]?.values.JE_SYS_PATHSCHEMENAME}（${defaultScheme[0]?.values.JE_SYS_PATHSCHEME}）- 全部服务`"
        :info="$t('basic.info')"
        :can-delete="false"
        @listClick="($event) => listClick('isDefault', $event)"
      ></ItemList>
      <div class="addItem">
        <Button type="text" class="btn" @Click="() => listClick('add', true)">
          <i class="fal fa-plus-square">&nbsp;</i>{{ $t('basic.add') }}</Button
        >
      </div>
      <div class="items">
        <template v-for="item in schemeList" :key="item.values.JE_CORE_SETPLAN_ID">
          <ItemList
            v-if="item.values.SETPLAN_ASSOCIATE_TOP_MENU_NAME"
            :can-delete="true"
            :title="`${item.values.JE_SYS_PATHSCHEMENAME}（${item.values.JE_SYS_PATHSCHEME}）- ${item.values.SETPLAN_ASSOCIATE_TOP_MENU_NAME}`"
            @listClick="($event) => listClick(item, $event)"
            @deleteClick="deleteEvent(item.values.JE_CORE_SETPLAN_ID)"
          />
          <ItemList
            v-else
            :can-delete="true"
            :title="`${item.values.JE_SYS_PATHSCHEMENAME}（${item.values.JE_SYS_PATHSCHEME}）- 全部服务`"
            @listClick="($event) => listClick(item, $event)"
            @deleteClick="deleteEvent(item.values.JE_CORE_SETPLAN_ID)"
          />
        </template>
      </div>
    </div>
    <div v-else class="secondary">
      <BasicSecondary
        :all-data="allData"
        :is-add="isAdd"
        :path-scheme-list="pathSchemeList"
        @showMain="showMain"
        @changeAllScheme="changeAllScheme"
      />
    </div>
  </div>
</template>

<script>
  import { defineComponent, onMounted, onUnmounted, reactive, ref } from 'vue';
  import ItemList from './item-list.vue';
  import { Button, Modal } from '@jecloud/ui';
  import VueEvent from '@/helper/model/event';
  import BasicSecondary from './basic-secondary.vue';
  import { onScroll, scrollToTop } from '@/utils/utils';
  import { deleteScheme, getAllScheme } from '@/api';

  export default defineComponent({
    name: 'ManageBasic',
    components: {
      Button,
      ItemList,
      BasicSecondary,
    },
    setup() {
      const formState = reactive({});
      let meta = {};
      meta = JSON.parse(JSON.stringify(formState));
      const isChange = () => {
        return meta.JE_SYS_DOCUMENT === formState.JE_SYS_DOCUMENT;
      };
      const changeBar = () => {
        VueEvent.emit('saveResult', isChange());
      };
      // 是否显示二级页面
      const showSecondary = ref(false);
      // 传给子组件的数据
      let allData = ref({});
      // 新增还是编辑
      const isAdd = ref(true);
      const listClick = (val, bol) => {
        showSecondary.value = bol;
        if (val === 'isDefault') {
          allData.value = defaultScheme.value[0].values;
          isAdd.value = false;
        } else if (val === 'add') {
          allData.value = {};
          isAdd.value = true;
        } else {
          allData.value = val.values;
          isAdd.value = false;
        }
      };
      const showMain = (val) => {
        showSecondary.value = val;
      };
      // 删除方案
      const deleteEvent = (payload) => {
        const confirmEvent = async () => {
          Modal.confirm('您确定要删除吗？', () => {
            deleteScheme({ JE_CORE_SETPLAN_ID: payload }).then(
              Modal.notice('删除成功！', 'success'),
              // 更新数据
              changeAllScheme(),
            );
          });
        };
        confirmEvent();
      };
      // 点击保存的回调
      const isSaveCallback = () => {
        if (showSecondary.value) return false;
        if (isChange()) return changeBar();
      };

      // 得到所有新增的方案
      const schemeList = ref([]);
      // 默认方案
      const defaultScheme = ref([]);
      // 发请求得到所有方案
      let pathSchemeList = ref([]);
      const getAllSchemeEvent = () => {
        getAllScheme().then((data) => {
          schemeList.value = data.filter((item) => {
            return item.values.SETPLAN_IS_DEFULT === '0';
          });
          defaultScheme.value = data.filter((item) => {
            return item.values.SETPLAN_IS_DEFULT === '1';
          });
          let arr = data;
          pathSchemeList.value = [];
          arr.forEach((td) => {
            pathSchemeList.value.push(td.values.JE_SYS_PATHSCHEME);
          });
          // pathSchemeList = JSON.parse(JSON.stringify(pathSchemeList));
        });
      };
      getAllSchemeEvent();
      // 刷新数据
      const changeAllScheme = () => {
        setTimeout(() => {
          getAllSchemeEvent();
        }, 50);
      };

      // 回滚到顶部
      onMounted(() => {
        scrollToTop();
      });
      // 去子页面
      const toSubpage = (data) => {
        const { parentName } = { ...data };
        if (parentName) {
          listClick('isDefault', true);
        }
      };

      const onScrolled = () => {
        showSecondary.value = false;
        setTimeout(() => {
          onScroll();
        }, 100);
      };

      const clickCallback = () => {
        // 如果显示了子页面就不提示
        if (!showSecondary.value) {
          Modal.notice('无数据操作!', 'info');
        }
      };
      VueEvent.on('isSave', isSaveCallback);
      VueEvent.on('toSubpage', toSubpage);
      VueEvent.on('toolbarSaveEventS', clickCallback);
      VueEvent.on('fadeScroll', onScrolled);
      onUnmounted(() => {
        VueEvent.off('isSave', isSaveCallback);
        VueEvent.off('toSubpage', toSubpage);
        VueEvent.off('toolbarSaveEventS', clickCallback);
        VueEvent.off('fadeScroll', onScrolled);
      });

      return {
        showSecondary,
        formState,
        listClick,
        showMain,
        deleteEvent,
        schemeList,
        defaultScheme,
        allData,
        isAdd,
        changeAllScheme,
        pathSchemeList,
      };
    },
  });
</script>

<style lang="less" scoped>
  .manage-basic {
    padding: 30px 100px;
    width: 100%;
    font-size: 14px;
    color: #333333;
    .addItem {
      margin-top: 8px;
      margin-bottom: 8px;
      padding-left: 18px;
      .fal {
        color: #0065f5;
      }
      .btn {
        color: #0065f5;
      }
    }
  }
</style>
